<template>
 <div class="full-page" style="overflow-y: hidden">
  <div v-if="appData.isMobile==false" class="full-page" style="overflow-y: hidden">
    <div style="width: 70px;height: 100%;position: fixed;left: 0;right: 0;box-shadow: 0 0 20px rgba(0,0,0,0.1);background-color: rgba(242,242,242,0.6);backdrop-filter: blur(10px);z-index: 10000;overflow-y: auto;overflow-x: hidden;"
      :style="{
        backgroundColor:appData.isDarkMode?'rgba(25,25,25,0.6)':'rgba(242,242,242,0.6)'
      }"
    >
    <div style="position: absolute;" :class="data.nav.current==5?['nav-button-selected']:['nav-button']" @click="changePage(5)" id="navBlueTag5">
<!--        <div v-if="data.nav.current==5" style="width: 4px;border-radius: 10px;height: 24px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 18px;"></div>-->
        <div class="nav-button-icon">
          <div style="display: inline-block;transform: translate(-50%,-50%);text-align: center;">
            <p v-if="data.loginedUserInfo==undefined" style="text-align: center;color: rgb(0,120,215);">登录</p>
            <v-avatar v-if="data.loginedUserInfo!=undefined" color="rgb(0,120,215)">
              <span v-if="data.loginedUserInfo.avatar==''">{{ func.getShortName(data.loginedUserInfo.name) }}</span>
              <div v-if="data.loginedUserInfo.avatar!=''"  style="width: 48px;height: 48px;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;"
                :style="{
                  backgroundImage:'url(' + appData.serverURL + '/download/' + data.loginedUserInfo.avatar + ')'
                }"
              >
            
              </div>
            </v-avatar>
          </div>
        </div>
    </div>
    <div style="min-height: 60px;height: calc(50vh - 5 * 30px);">

    </div>
    <div style="width: 100%;">
      <div :class="data.nav.current==0?['nav-button-selected']:['nav-button']" @click="changePage(0)" id="navBlueTag0">
<!--        <div v-if="data.nav.current==0" style="width: 4px;border-radius: 10px;height: 24px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 18px;"></div>-->
        <div class="nav-button-icon">
          <div style="display: inline-block;transform: translate(-50%,-50%);text-align: center;">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 6a1 1 0 00-1 1v2a1 1 0 001 1h26a1 1 0 001-1V7a1 1 0 00-1-1H17zm0 16a1 1 0 00-1 1v2a1 1 0 001 1h26a1 1 0 001-1v-2a1 1 0 00-1-1H17zM4 23a1 1 0 011-1h6a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM5 6a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V7a1 1 0 00-1-1H5zM4 39a1 1 0 011-1h6a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zm13-1a1 1 0 00-1 1v2a1 1 0 001 1h26a1 1 0 001-1v-2a1 1 0 00-1-1H17z" fill="currentColor"/></svg>
            <p style="font-size: 12px;">资讯</p>
          </div>
        </div>
      </div>

      <div :class="data.nav.current==1?['nav-button-selected']:['nav-button']" @click="changePage(1)" id="navBlueTag1">
<!--        <div v-if="data.nav.current==1" style="width: 4px;border-radius: 10px;height: 24px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 18px;"></div>-->
        <div class="nav-button-icon">
          <div style="display: inline-block;transform: translate(-50%,-50%);text-align: center;">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 5c9.389 0 17 7.611 17 17 0 3.549-1.087 6.844-2.947 9.57l6.782 6.782a1 1 0 010 1.414l-1.697 1.698a1 1 0 01-1.414 0l-6.604-6.605A16.934 16.934 0 0122 39c-9.389 0-17-7.611-17-17S12.611 5 22 5zm0 4.2C14.93 9.2 9.2 14.93 9.2 22S14.93 34.8 22 34.8 34.8 29.07 34.8 22 29.07 9.2 22 9.2z" fill="currentColor"/></svg>
            <p style="font-size: 12px;">搜索</p>
          </div>
        </div>
      </div>

      <div :class="data.nav.current==2?['nav-button-selected']:['nav-button']" @click="changePage(2)" id="navBlueTag2">
<!--        <div v-if="data.nav.current==2" style="width: 4px;border-radius: 10px;height: 24px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 18px;"></div>-->
        <div class="nav-button-icon">
          <div style="display: inline-block;transform: translate(-50%,-50%);text-align: center;">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34 12a2 2 0 012 2v28a2 2 0 01-2 2H6a2 2 0 01-2-2V14a2 2 0 012-2h28zm-2 4H8v24h24V16zM42 4a2 2 0 012 2v26h-4V8H16V4h26zM28 30a1 1 0 011 1v2a1 1 0 01-1 1H12a1 1 0 01-1-1v-2a1 1 0 011-1h16zm-9-8a1 1 0 011 1v2a1 1 0 01-1 1h-7a1 1 0 01-1-1v-2a1 1 0 011-1h7z" fill="currentColor"/></svg>
            <p style="font-size: 12px;width: 100px;">填志愿</p>
          </div>
        </div>
      </div>

      <div :class="data.nav.current==3?['nav-button-selected']:['nav-button']" @click="changePage(3)" id="navBlueTag3">
<!--        <div v-if="data.nav.current==3" style="width: 4px;border-radius: 10px;height: 24px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 18px;"></div>-->
        <div class="nav-button-icon">
          <div style="display: inline-block;transform: translate(-50%,-50%);text-align: center;">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M44 4a2 2 0 012 2v10a2 2 0 01-2 2h-2v24a2 2 0 01-2 2H8a2 2 0 01-2-2V18H4a2 2 0 01-2-2V6a2 2 0 012-2h40zm-6 14H10v22h28V18zm-7 4a1 1 0 011 1v2a1 1 0 01-1 1H17a1 1 0 01-1-1v-2a1 1 0 011-1h14zM42 8H6v6h36V8z" fill="currentColor"/></svg>
            <p style="font-size: 12px;width: 100px;">论坛</p>
          </div>
        </div>
      </div>

      <div :class="data.nav.current==4?['nav-button-selected']:['nav-button']" @click="changePage(4)" id="navBlueTag4">
<!--        <div v-if="data.nav.current==4" style="width: 4px;border-radius: 10px;height: 24px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 18px;"></div>-->
        <div class="nav-button-icon">
          <div style="display: inline-block;transform: translate(-50%,-50%);text-align: center;">
            <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 2c12.15 0 22 9.85 22 22s-9.85 22-22 22S2 36.15 2 24 11.85 2 24 2zm0 4C14.059 6 6 14.059 6 24s8.059 18 18 18 18-8.059 18-18S33.941 6 24 6zm1 26a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2a1 1 0 011-1h2zm-1.284-20c2.377 0 4.352.576 5.925 1.727C31.214 14.88 32 16.584 32 18.845c0 1.386-.342 2.553-1.026 3.502-.4.576-1.167 1.311-2.303 2.207l-1.12.88c-.61.48-1.016 1.04-1.216 1.679-.054.175-.102.499-.143.974a1 1 0 01-.996.913h-2.24a1 1 0 01-1-1l.002-.046.003-.046c.129-1.392.267-2.273.414-2.642.273-.688.978-1.48 2.114-2.375l1.152-.912c.379-.288 2.33-1.662 2.33-2.878 0-1.217-.212-1.665-.823-2.332-.61-.668-1.986-.883-3.227-.883-1.22 0-2.263.324-2.773 1.145a5.78 5.78 0 00-.569 1.2 4.18 4.18 0 00-.146.614 1 1 0 01-.985.831h-2.355a1 1 0 01-1-1l.002-.056.005-.057c.025-.223.051-.41.078-.557.39-2.172 1.377-3.768 2.962-4.79 1.241-.81 2.767-1.216 4.576-1.216z" fill="currentColor"/></svg>
            <p style="font-size: 12px;width: 100px;">咨询</p>
          </div>
        </div>
      </div>

      <div style="width: 4px;border-radius: 10px;height: 24px;background-color: rgb(0,120,215);position: fixed;left: 0;transition: top .3s cubic-bezier(0.23, 1, 0.320, 1)"
        :style="{
          top:data.nav.blueTagPosition.toString() + 'px'
        }"
      ></div>


      <div style="min-height: 60px;height: calc(50vh - 5 * 30px);">

      </div>

    </div>

      <button @click="controlChat(1)" title="消息" v-if="data.loginedUserInfo!=undefined" style="border-radius: 100px;border: 0 !important;position: fixed;left: 15px;bottom: 15px;padding: 10px 10px;width: 38px;height: 38px">
        <div v-if="getAllUnread()" style="padding: 0px 4px;border-radius: 15px;background-color: red;display: inline-block;position: absolute;right: 0;font-size: 10px;color: white;bottom: 2px">
          {{ formatUnread(getAllUnread()) }}
        </div>
        <svg width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 3c11.598 0 21 9.402 21 21s-9.402 21-21 21H5.1A2.1 2.1 0 013 42.9V24C3 12.402 12.402 3 24 3zm0 4C14.611 7 7 14.611 7 24v17h17c9.389 0 17-7.611 17-17S33.389 7 24 7zm1 21a1 1 0 011 1v2a1 1 0 01-1 1H15a1 1 0 01-1-1v-2a1 1 0 011-1h10zm8-8a1 1 0 011 1v2a1 1 0 01-1 1H15a1 1 0 01-1-1v-2a1 1 0 011-1h18z" fill="currentColor"/></svg>
      </button>

    </div>
    <v-progress-linear v-if="data.news.data==undefined || data.showLoading" style="width: 100vw;position: fixed;right: 0;top: 0;z-index: 11000;color: rgb(0,120,215);" indeterminate></v-progress-linear>
    <div id="subPage" style="width: calc(100vw - 70px);height: 100vh;overflow: hidden;overflow-y: scroll;position: relative;margin-left: 70px;border-radius: 10px 0 0 0;">
      <RouterView @changeAIChatContentHide="(e)=>{
        data.charm.aichat.contentHide = e
      }" :go-to-news="goToNews" v-if="data.showRV" :control-forward="controlForward" @showChatForm="showChatForm" :ws="ws" :rsps="resetSubPageScroll" ref="subPage" :ctrl-form="ctrlForm" :ctrl-charm="ctrlCharm" :control-loading="controlLoading" :change-page="changePage" :app-data="appData" :home-data="data"></RouterView>
      <div style="width: 100%;line-height: 60px;text-align: center;color: var(--color-neutral-10);background-color: var(--color-neutral-2);">
        Copyright © 2024 by Zhi Yuan Zhu Shou
      </div>
    </div>
  </div>
  <div v-if="appData.isMobile==true" class="full-page">

  </div>

   <div class="charm" id="aichat">
     <div class="charmInside">
       <div class="charmBgBrush">

       </div>
       <div class="charmTitle">
         AI助手
         <svg style="float: right;cursor: pointer;" @click="()=>{
          ctrlCharm('aichat',0)
        }" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
       </div>
       <div v-if="aichatIndex!=-1" class="charmContent">

        <div id="aichatMessageContainer" style="width: 100%;height: calc(100% - 140px);padding: 10px 20px;overflow-y: auto">

          <chat-item2 @endLoading="()=>{
            data.charm.aichat.status = 0
          }" v-for="item in data.chat.userList[aichatIndex].messages" :config="{
            showAnimation:(item.toUserMark==data.loginedUserInfo.mark && item.sa!=false)?true:false,
            position:item.toUserMark!=data.loginedUserInfo.mark?1:-1,
            text:item.content
          }"></chat-item2>

        </div>

         <div style="width: 100%;height: 140px;padding: 10px 20px;padding-bottom: 20px;position: relative">
          <textarea
            :style="{
              backgroundColor:appData.theme.background
            }"
          @keypress="async (e)=>{
            if(data.charm.aichat.input==''){
              data.charm.aichat.input=''
              return
            }
            if(e.code=='Enter' && e.shiftKey==false){
              data.charm.aichat.status = 1
             // data.chat.userList[aichatIndex].messages.push({
             // fromUserMark: data.loginedUserInfo.mark,
             // toUserMark: 'aichat',
             // content:this.data.charm.aichat.input
             // })
             await this.ws.send(tool.encodeString(JSON.stringify({
                token:this.data.token,
                operationName:'application',
                subOpName:'chatSendMessage',
                fromUserMark:this.data.loginedUserInfo.mark,
                toUserMark:'aichat',
                content:tool.removeStringsFromArrayInString(this.data.charm.aichat.input,['共产党','习近平','共产','中国','中华人民共和国','周恩来','邓小平','党','教育厅','国家','政府']),
                contentHide:tool.removeStringsFromArrayInString(this.data.charm.aichat.contentHide,['共产党','习近平','共产','中国','中华人民共和国','周恩来','邓小平','党','教育厅','国家','政府']) ,
                type:1
              })))
              this.data.charm.aichat.input = ''
            }
          }" v-model="data.charm.aichat.input" :placeholder="data.charm.aichat.status==1?'正在思考...':(data.charm.aichat.status==2?'正在回复...':'在这里输入有关当前页面的问题')" :disabled="data.charm.aichat.status!=0" style="max-width: calc(100% - 80px);min-width: calc(100% - 50px);max-height: 100%;min-height: 100%;border-radius: 3px;border: 1px solid var(--color-neutral-3);padding: 10px 10px;color: var(--color-neutral-10);border-radius: 3px;outline: none;resize: none;border-radius: 5px;font-size: 16px;"></textarea>
           <button title="发送" v-if="data.charm.aichat.status==0" style="position: absolute;top: 10px;right: 20px;border-radius: 5px;padding: 5px 5px;width: 40px;height: 40px;border: 0 !important;padding-top: 10px;" @click="async ()=>{
            if(data.charm.aichat.input==''){
              data.charm.aichat.input=''
              return
            }
             data.charm.aichat.status = 1
             // data.chat.userList[aichatIndex].messages.push({
             // fromUserMark: data.loginedUserInfo.mark,
             // toUserMark: 'aichat',
             // content:this.data.charm.aichat.input
             // })
             await this.ws.send(tool.encodeString(JSON.stringify({
                token:this.data.token,
                operationName:'application',
                subOpName:'chatSendMessage',
                fromUserMark:this.data.loginedUserInfo.mark,
                toUserMark:'aichat',
                content:tool.removeStringsFromArrayInString(this.data.charm.aichat.input,['共产党','习近平','共产','中国','中华人民共和国','周恩来','邓小平','党','教育厅','国家','政府']),
                contentHide:tool.removeStringsFromArrayInString(this.data.charm.aichat.contentHide,['共产党','习近平','共产','中国','中华人民共和国','周恩来','邓小平','党','教育厅','国家','政府']) ,
                type:1
              })))
              this.data.charm.aichat.input = ''

           }"><svg width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.003v-13c0-1.464 1.512-2.415 2.817-1.826l.134.066 37 20c1.35.73 1.397 2.626.14 3.437l-.14.082-37 20c-1.288.697-2.843-.182-2.946-1.61L5 44.002v-13a2 2 0 01.467-1.284l.119-.13 5.586-5.585-5.586-5.586a2 2 0 01-.578-1.238L5 17.003v-13 13zm31.094 8.999H14.829L9 31.832v8.816l27.094-14.646zM9 7.357v8.817l5.828 5.828h21.266L9 7.357z" fill="currentColor"/></svg></button>
           <div v-if="data.charm.aichat.status!=0" style="--size: 24px; --dot-size: 3px; --dot-count: 6; --color: var(--color-neutral-10); --speed: 1s; --spread: 60deg;position: absolute;top: 10px;right: 23px" class="dots">
             <div style="--i: 0;" class="dot"></div>
             <div style="--i: 1;" class="dot"></div>
             <div style="--i: 2;" class="dot"></div>
             <div style="--i: 3;" class="dot"></div>
             <div style="--i: 4;" class="dot"></div>
             <div style="--i: 5;" class="dot"></div>
           </div>
         </div>

       </div>
       <div class="charmContent">
         <p style="font-size: 14px;color: var(--color-neutral-10)" v-if="aichatIndex==-1">AI助手尚未准备就绪</p>
       </div>
     </div>
   </div>

   <div id="charmBg" @click="hideAllCharm" style="width: 100vw;height: 100vh;position: fixed;z-index: 99999;display: none;left: 0;top: 0;">

   </div>

   <div id="loginPromptForm" style="width: 100vw;height: 100vh;padding-left: 50vw;padding-top: 50vh;position: fixed;left: 0;top: 0;background-color: rgba(0,0,0,0.1);z-index: 30000;display: none">
     <div style="width: 90vw;max-width: 600px;height: 200px;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1);transform: translate(-50%,-50%);padding: 20px 20px;color: var(--color-neutral-10)">
       <p style="font-size: 18px;font-weight: bold">提示</p>
       <p style="font-size: 14px;margin-top: 20px">若使用此功能，请先登录。</p>
       <svg @click="ctrlForm('loginPromptForm',false)" style="position: absolute;right: 25px;top: 25px;cursor: pointer;color: var(--color-neutral-10);" width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
       <div style="width: 100%;text-align: right;margin-top: 60px">
         <button @click="ctrlForm('loginPromptForm',false)">取消</button>
         <button @click="changePage(5)" style="margin-left: 10px">确定</button>
       </div>
     </div>
   </div>

   <div id="contentForm" style="width: 100vw;height: 100vh;padding-left: 50vw;padding-top: 50vh;position: fixed;left: 0;top: 0;background-color: rgba(0,0,0,0.1);z-index: 30000;display: none">
     <div style="max-width: 80vw;height: auto;border-radius: 10px;background-color: var(--color-neutral-1);box-shadow: 0 4px 10px rgba(0,0,0,0.1);transform: translate(-50%,-50%);padding: 20px 20px;color: var(--color-neutral-10);max-height: 80vh;min-width: 600px;width: 100%;">
       <div style="width: 100%;position: relative;height: 30px">
         <p id="contentForm_title" style="font-size: 18px;font-weight: bold"></p>
         <svg @click="ctrlForm('contentForm',false)" style="position: absolute;right: 5px;top: 5px;cursor: pointer;color: var(--color-neutral-10);" width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
       </div>

        <div style="height: auto;overflow-y: scroll;overflow-x: scroll;max-height: calc(80vh - 40px - 95px);margin-top: 10px">
          <p id="contentForm_content" style="font-size: 14px;margin-top: 20px;user-select: text !important"></p>
        </div>

       <div style="width: 100%;text-align: right;margin-top: 20px">
         <button @click="ctrlForm('contentForm',false)">关闭</button>
       </div>
     </div>
   </div>

   <div style="width: calc(100vw);height: 100vh;position: fixed;left: 0;top: 0;z-index: 20000;transition-property: padding,backdrop-filter,opacity;transition-duration: .3s;transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1)"
        :style="{
          backdropFilter:data.chat.status==2?'blur(20px)':'blur(0)',
          display:data.chat.status==-1?'none':'unset',
        }"
   >
     <div @click="controlChat(0)" style="width: 100vw;height: 100vh;position: absolute;left: 0;top: 0;">

     </div>
    <div style="transition-property: transform,background-color,left,bottom,width,height;border-radius: 10px;box-shadow: 0 4px 10px rgba(0,0,0,0.3);transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);backdrop-filter: blur(20px);width: 600px;height: 500px;display: inline-block;position: absolute;overflow-y: hidden;border: 1px solid rgba(128,128,128,0.4);overflow: hidden;min-width: 650px"
         :style="{
            transform:(data.chat.status==3)?'translate(-50%,50%)':(data.chat.status==0?'translate(0,120%)':'translate(0,0)'),
            backgroundColor:true?appData.theme.background:appData.theme.translucentBackground,
            left:(data.chat.status==3)?'50vw':'90px',
            bottom:(data.chat.status==3)?'50vh':'20px',
            height:(data.chat.status==2 || localStorage.getItem('chatFormStatus')==2)?'calc(100vh - 40px)':'500px',
            width:(data.chat.status==2 || localStorage.getItem('chatFormStatus')==2)?'calc(100vw - 190px)':'700px',
            transitionDuration:data.chat.showAni?'.3s':'0s'
          }"
    >
      <div v-if="data.chat.warningForm.show" style="width: 100%;height: calc(100%);position: absolute;z-index: 3000;display: inline-block;left: 0;bottom: 0;background-color: rgba(0,0,0,0.2);"
        :style="{
          paddingLeft:(data.chat.status==2 || localStorage.getItem('chatFormStatus')==2)?'calc(50vw - 95px)':'350px',
          paddingTop:(data.chat.status==2 || localStorage.getItem('chatFormStatus')==2)?'calc(50vh - 20px)':'250px',
        }"
      >
        <div style="transform: translate(-50%,-50%);box-shadow: 0 4px 10px rgba(0,0,0,0.1);color: var(--color-neutral-10);padding: 15px 15px;border-radius: 10px;border: 1px solid rgba(128,128,128,0.2);display: inline-block;min-width: 300px"
          :style="{
            backgroundColor:appData.theme.background
          }"
        >
          <p style="font-size: 16px;font-weight: bold">{{ data.chat.warningForm.title }}</p>
          <svg @click="controlChatWarningForm(0)" v-if="data.chat.warningForm.showCancel" style="position: absolute;right: 15px;top: 17px;cursor: pointer" width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
          <div style="margin-top: 5px;">
            <p style="width: 100%;word-break: break-all;font-size: 12px">{{ data.chat.warningForm.content }}</p>
          </div>
          <div style="text-align: right;margin-top: 5px">
            <button @click="controlChatWarningForm(0)" v-if="data.chat.warningForm.showCancel" style="border: 0 !important;margin-right: 5px;padding: 5px 15px">取消</button>
            <div style="display: inline-block;background-color: rgb(0,120,215);border-radius: 3px">
              <button @click="data.chat.warningForm.okCallback();controlChatWarningForm(0);" style="border: 0 !important;color: white;padding: 5px 15px;color: white !important">确定</button>
            </div>
          </div>
        </div>
      </div>
      <div v-if="data.chat.isPreparing==false" style="position: relative;width: 100%;height: 100%">
        <div style="width: 200px;height: 100%;border-right: 0.5px solid rgba(128,128,128,0.2);display: inline-block;"
             :style="{
          width:(data.chat.status==2 || localStorage.getItem('chatFormStatus')==2)?'300px':'250px',
        }"
        >
          <div style="padding: 10px 10px;height: 75px;border-bottom: 1px solid rgba(128,128,128,0.2);position: relative">
            <p style="font-size: 12px;color: var(--color-neutral-6);margin-bottom: 5px">消息</p>
            <input @input="modifyUserListDisplay" v-model="data.chat.searchUserInput" style="width: 100%;border: 0 !important;border-radius: 3px;background-color: var(--color-neutral-1);outline: none;padding: 5px 10px;color: var(--color-neutral-10);font-size: 14px;padding-right: 25px"  placeholder="搜索用户" type="text" />
            <svg v-if="data.chat.searchUserInput!=''" @click="data.chat.searchUserInput='';modifyUserListDisplay()" style="color: var(--color-neutral-10);position: absolute;right: 16px;top: 40px;cursor: pointer" width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
          </div>
          <div style="width: 100%;height: calc(100% - 70px);overflow-y: auto;padding: 10px 10px">

            <p style="text-align: center;font-size: 12px;color: var(--color-neutral-6)" v-if="data.chat.userListDisplay.length==0">{{ data.chat.searchUserInput==''?'暂无消息':'搜索结果为空' }}</p>

            <div :class="data.chat.currentUserMark==item.userMark?['chatItemButton-selected']:['chatItemButton']" v-for="(item,index) in data.chat.userListDisplay"
              @click="async ()=>{
                let index0 = -1
                for(let i=0;i<data.chat.userList.length;i++){
                  if(data.chat.userList[i].userMark==item.userMark){
                    index0 = i
                    break
                  }
                }
                data.chat.currentUserIndexInUserList = index0
                data.chat.currentUserMark = item.userMark
                await this.ws.send(tool.encodeString(JSON.stringify({
                  token:this.data.token,
                  operationName:'application',
                  subOpName:'chatSetUnreadToZero',
                  toUserMark:this.data.loginedUserInfo.mark,
                  fromUserMark:this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userInfo.mark
                })))
                this.data.chat.userList[this.data.chat.currentUserIndexInUserList].unread = 0
                modifyMessageDisplay()
              }"
            >
              <v-avatar color="rgb(0,120,215)" style="margin-right: 10px;">
                <span v-if="item.userInfo.avatar==''">{{ tool.getShortName(item.userInfo.name) }}</span>
                <div v-if="item.userInfo.avatar!=''"  style="width: 48px;height: 48px;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;"
                     :style="{
                      backgroundImage:'url(' + appData.serverURL + '/download/' + item.userInfo.avatar + ')'
                    }"
                >
                </div>
              </v-avatar>
              <div style="width: calc(100% - 65px);height: 40px;display: inline-block;position: absolute;right: 10px;top: 10px">
                <p style="font-weight: bold;width: calc(100% - 55px)">{{ item.userInfo.name }}</p>
                <span style="position: absolute;right: 0px;top: 0px;color: var(--color-neutral-6);font-size: 12px">{{ getChatUserItemDisplayTime(item) }}</span>
                <div style="height: 21px;overflow: hidden;position: relative;width: 100%;">
                  <p style="color: var(--color-neutral-6);width: calc(100% - 20px);word-break: break-all;">{{ getChatUserItemDisplayContent(item) }}</p>
                  <div v-if="item.unread!=0" style="padding: 0px 4px;border-radius: 15px;background-color: red;display: inline-block;position: absolute;right: 0;font-size: 10px;color: white;top: 2px">
                    {{ formatUnread(item.unread) }}
                  </div>
                </div>
              </div>
              <div v-if="data.chat.currentUserMark==item.userMark" style="display: inline-block;width: 5px;height: 20px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 20px;border-radius: 100px">

              </div>
            </div>

          </div>

        </div>
        <div style="display: inline-block;width: calc(100% - 200px);height: 100%;position: relative;float: right"
             :style="{
          width:(data.chat.status==2 || localStorage.getItem('chatFormStatus')==2)?'calc(100% - 300px)':'calc(100% - 250px)',
        }"
        >
          <div style="width: 100%;height: 75px;position: absolute;width: 100%;top: 0;right: 0;z-index: 2000;backdrop-filter: blur(10px)"
            :style="{
              backgroundColor:(data.chat.userList.length==0 || data.chat.currentUserIndexInUserList==-1)?appData.theme.background:appData.theme.translucentBackground,
              borderBottom:(data.chat.userList.length==0 || data.chat.currentUserIndexInUserList==-1)?'unset':'1px solid rgba(128,128,128,0.2)',
            }"
          >
            <p v-if="data.chat.userList.length!=0 && data.chat.currentUserIndexInUserList!=-1" style="position: absolute;left: 15px;bottom: 25px;font-weight: bold;font-size: 18px;color: var(--color-neutral-10)">{{ data.chat.userList[data.chat.currentUserIndexInUserList].userInfo.name }}
              <button @click="async ()=>{
                controlForward(true,8,data.chat.userList[data.chat.currentUserIndexInUserList].userMark)
              }" title="将此人推荐给别人" style="border: 0 !important;text-align: center;height: 25px;width: 25px;padding: 3px 3px;padding-top: 7px;position: relative;top: 7px">
                <svg style="transform: translateY(-7px)" width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 36a1 1 0 011 1v3h28v-3a1 1 0 011-1h2a1 1 0 011 1v5a2 2 0 01-2 2H8a2 2 0 01-2-2v-5a1 1 0 011-1h2zM32.613 3.31l.094.083 9.9 9.9a1 1 0 01.083 1.32l-.083.094-9.9 9.9a1 1 0 01-1.32.083l-.094-.083-1.414-1.415a1 1 0 01-.084-1.32l.084-.094 5.776-5.777-.497.003c-5.734.073-10.308 1.163-14.166 3.263-3.796 2.068-6.753 5.078-8.783 8.944a24.502 24.502 0 00-.905 1.92l-.112.277c-.1.253-.218.564-.351.933A1 1 0 019.9 32H7.777a1 1 0 01-.95-1.31l.106-.319a28.914 28.914 0 011.747-4.047c2.403-4.563 5.928-8.144 10.42-10.584 4.465-2.426 9.796-3.725 16.556-3.74l-5.778-5.778a1 1 0 01-.084-1.32l.084-.094 1.414-1.415a1 1 0 011.218-.152l.102.07z" fill="currentColor"/></svg>
              </button>
            </p>
            <p v-if="data.chat.userList.length!=0 && data.chat.currentUserIndexInUserList!=-1" style="position: absolute;left: 15px;bottom: 10px;font-size: 18px;font-size: 12px;color: var(--color-neutral-6)">{{ data.chat.userList[data.chat.currentUserIndexInUserList].userInfo.email }}</p>
            <button title="最小化" @click="controlChat(0)" style="padding: 3px 5px;border: 0 !important;width: 24px;height: 24px;position: absolute;right: 40px;top: 10px">
              <svg style="transform: rotate(45deg)" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path d="M6.586 38.586a2 2 0 102.828 2.828l32-32a2 2 0 00-2.828-2.828l-32 32z" fill="currentColor"/></svg>
            </button>
            <button :title="localStorage.getItem('chatFormStatus')==1?'最大化':'还原'" @click="controlChat(2)" style="padding: 3px 5px;border: 0 !important;width: 24px;height: 24px;position: absolute;right: 10px;top: 10px">
              <svg v-if="localStorage.getItem('chatFormStatus')==1" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.003 28a1 1 0 011 1v11h11.008a1 1 0 011 1v2a1 1 0 01-1 1H6a2 2 0 01-2-2V29a1 1 0 011-1h2.003zM42 4a2 2 0 012 2v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V8H29a1 1 0 01-1-1V5a1 1 0 011-1h13z" fill="currentColor"/></svg>
              <svg v-if="localStorage.getItem('chatFormStatus')==2" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 28a2 2 0 012 2v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V32H5a1 1 0 01-1-1v-2a1 1 0 011-1h13zM31 4a1 1 0 011 1v11h11a1 1 0 011 1v2a1 1 0 01-1 1H30a2 2 0 01-2-2V5a1 1 0 011-1h2z" fill="currentColor"/></svg>
            </button>
            <div style="position: absolute;right: 10px;bottom: 5px;display: inline-block">
              <button v-if="!(data.chat.userList.length==0 || data.chat.currentUserIndexInUserList==-1)" :title="((data.chat.userList[data.chat.currentUserIndexInUserList].relationShipStatus==0 || data.chat.userList[data.chat.currentUserIndexInUserList].relationShipStatus==undefined)?'删除此人':'解除关系')" style="border: 0 !important;text-align: center;height: 30px;padding: 3px 3px;padding-top: 7px;margin-right: 5px"
                      @click="async ()=>{
                          controlChatWarningForm(true,'提示',((data.chat.userList[data.chat.currentUserIndexInUserList].relationShipStatus==0 || data.chat.userList[data.chat.currentUserIndexInUserList].relationShipStatus==undefined)?'删除此人':'解除关系') + '后你与此人的聊天记录将被删除，并且用户列表内看不见此人，是否继续？',true,async ()=>{
                            await ws.send(tool.encodeString(JSON.stringify({
                              token:this.data.token,
                              operationName:'application',
                              subOpName:'chatDeleteRelationShip',
                              fromUserMark:this.data.loginedUserInfo.mark,
                              toUserMark:this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userInfo.mark,
                            })))
                            data.chat.userList = tool.deleteArrayElemByIndex(data.chat.userList,data.chat.currentUserIndexInUserList)
                            data.chat.currentUserIndexInUserList = -1
                            modifyUserListDisplay()
                          })
                      }"
              >
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24 46c12.15 0 22-9.85 22-22S36.15 2 24 2 2 11.85 2 24s9.85 22 22 22zm0-4c-9.941 0-18-8.059-18-18S14.059 6 24 6s18 8.059 18 18-8.059 18-18 18zm4.95-25.778a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.414L26.828 24l4.95 4.95a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L24 26.828l-4.95 4.95a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414l4.95-4.95-4.95-4.95a1 1 0 010-1.414l1.414-1.414a1 1 0 011.414 0l4.95 4.95 4.95-4.95z" fill="currentColor"/></svg>
                <span style="font-size: 12px;position: relative;top: -3.5px;margin-left: 3px">{{ ((data.chat.userList[data.chat.currentUserIndexInUserList].relationShipStatus==0 || data.chat.userList[data.chat.currentUserIndexInUserList].relationShipStatus==undefined)?'删除此人':'解除关系') }}</span>
              </button>
              <button v-if="!(data.chat.userList.length==0 || data.chat.currentUserIndexInUserList==-1) && !((data.chat.userList[data.chat.currentUserIndexInUserList].relationShipStatus==0 || data.chat.userList[data.chat.currentUserIndexInUserList].relationShipStatus==undefined))" title="屏蔽对方" style="border: 0 !important;text-align: center;height: 30px;padding: 3px 3px;padding-top: 7px;"
                      @click="async ()=>{
                        if(data.chat.userList[data.chat.currentUserIndexInUserList].shield){
                          data.chat.userList[data.chat.currentUserIndexInUserList].shield = false
                          await ws.send(tool.encodeString(JSON.stringify({
                            token:this.data.token,
                            operationName:'application',
                            subOpName:'chatSetShield',
                            fromUserMark:this.data.loginedUserInfo.mark,
                            toUserMark:this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userInfo.mark,
                            op:false
                          })))
                        }else{
                          data.chat.userList[data.chat.currentUserIndexInUserList].shield = true
                          await ws.send(tool.encodeString(JSON.stringify({
                            token:this.data.token,
                            operationName:'application',
                            subOpName:'chatSetShield',
                            fromUserMark:this.data.loginedUserInfo.mark,
                            toUserMark:this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userInfo.mark,
                            op:true
                          })))
                        }
                      }"
              >
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M35 23c6.627 0 12 5.373 12 12s-5.373 12-12 12-12-5.373-12-12 5.373-12 12-12zM23 2c11.176 0 20.314 8.731 20.963 19.744a15.93 15.93 0 00-4.284-2.05C38.14 11.889 31.259 6 23 6 13.611 6 6 13.611 6 23v17h13.797a15.937 15.937 0 001.973 4H4.1A2.1 2.1 0 012 41.9V23C2 11.402 11.402 2 23 2zm16.064 39.892L28.108 30.936a8 8 0 0010.956 10.956zM35 27a7.963 7.963 0 00-4.064 1.108l10.956 10.956A8 8 0 0035 27zm-16 0v4h-6v-4h6zm5-8v4H13v-4h11z" fill="currentColor"/></svg>
                <span v-if="data.chat.userList[data.chat.currentUserIndexInUserList].shield==false" style="font-size: 12px;position: relative;top: -3.5px;margin-left: 3px">屏蔽对方</span>
                <span v-if="data.chat.userList[data.chat.currentUserIndexInUserList].shield" style="font-size: 12px;position: relative;top: -3.5px;margin-left: 3px">取消屏蔽对方</span>
              </button>
            </div>
          </div>
          <div id="chatMessagesForm" v-if="!(data.chat.userList.length==0 || data.chat.currentUserIndexInUserList==-1)" style="width: 100%;height: 100%;overflow-y: auto;padding-top: 75px;padding-bottom: 85.8px">
            <div style="padding: 15px 15px">

              <div v-for="gitem in data.chat.display"
                :style="{
                  display:displayThisGroup(gitem)?'unset':'none'
                }"
              >

                <p style="text-align: center;font-size: 12px;color: var(--color-neutral-6);margin-bottom: 5px">{{ gitem[0] }}</p>

                <div v-for="(item,index) in gitem[1]" style="margin-bottom: 10px">
                  <div class="chatMessageItem" v-if="item.type!=0 && item.toUserMark==data.loginedUserInfo.mark">
                    <div v-if="item.type!=0 && item.toUserMark==data.loginedUserInfo.mark" style="max-width: 80%;border-radius: 10px;box-shadow: 0 1px 3px rgba(0,0,0,0.3);font-size: 14px;width: auto;display: inline-block;user-select: text;color: var(--color-neutral-10);border: 1px solid rgba(128,128,128,0.2);word-break: break-all;min-height: 33px;overflow: hidden;position: relative"
                         :style="{
                    backgroundColor:appData.theme.translucentBackground
                  }"
                    >
                      <span v-if="item.type==1" style="padding: 6px 8px;display: inline-block;word-break: break-all;user-select: text" :innerHTML="getDisplayContentHTML(item.content)"></span>
                      <div class="image" v-if="item.type==2" style="width: 100%;max-height: 200px;position: relative">
                        <div @click="openLink(config.serverURL + '/download/' + item.content)" class="image-inside">

                        </div>
                        <img @load="async ()=>{
                          await tool.waitSeconds(0.001)
                          try{
                            document.getElementById('chatMessagesForm').scrollTop = 1000000
                          }catch(e){

                          }

                        }" :src="config.serverURL + '/download/' + item.content" style="max-width: 300px;max-height: 200px;" alt="">
                      </div>
                      <chat-message-item :start-chat="showChatForm" @hideChat="async (e)=>{
                        if(e!=''){
                          controlChat(0)
                        data.showRV = false
                        await tool.waitSeconds(0.001)
                        data.showRV = true
                        }

                      }" :home-data="data" style="height: 100%" :type="item.type" v-if="item.type>=3" :app-data="appData" :data="getMessageItemInputData(item.content)"></chat-message-item>
                    </div>
                    <br style="color: var(--color-neutral-10)" v-if="item.type!=0 && item.toUserMark==data.loginedUserInfo.mark">
                    <span :style="{
                      opacity:true?0:1,
                      cursor:true?'unset':'pointer',
                    }" class="chatMessageDrawback" style="font-size: 12px;margin-top: 3px;" v-if="item.type!=0 && item.toUserMark==data.loginedUserInfo.mark">撤回</span>
                  </div>

                  <div class="chatMessageItem" style="text-align: right;">
                    <div v-if="item.type!=0 && item.fromUserMark==data.loginedUserInfo.mark" style="max-width: 80%;border-radius: 10px;box-shadow: 0 1px 3px rgba(0,0,0,0.3);font-size: 14px;width: auto;display: inline-block;user-select: text;text-align: left !important;color: white;background: linear-gradient(135deg, rgb(0,120,215), rgb(0,65,192));word-break: break-all;min-height: 33px;overflow: hidden;position: relative"
                         :style="{
                    backgroundColor:appData.theme.background
                  }"
                    >
                      <span v-if="item.type==1" style="padding: 6px 8px;display: inline-block;word-break: break-all;user-select: text"  :innerHTML="getDisplayContentHTML(item.content)"></span>
                      <div class="image" v-if="item.type==2" style="width: 100%;position: relative">
                        <div @click="openLink(config.serverURL + '/download/' + item.content)" class="image-inside"></div>
                        <img @load="async ()=>{
                          await tool.waitSeconds(0.001)
                          try{
                            document.getElementById('chatMessagesForm').scrollTop = 1000000
                          }catch(e){

                          }

                        }" :src="config.serverURL + '/download/' + item.content" style="max-width: 300px;max-height: 200px;" alt="">
                      </div>
                      <chat-message-item :start-chat="showChatForm" @hideChat="async (e)=>{
                        if(e!=''){
                          controlChat(0)
                        data.showRV = false
                        await tool.waitSeconds(0.001)
                        data.showRV = true
                        }

                      }" :home-data="data" style="height: 100%" :type="item.type" v-if="item.type>=3" :app-data="appData" :data="getMessageItemInputData(item.content)"></chat-message-item>
                    </div>
                    <br v-if="item.type!=0 && item.fromUserMark==data.loginedUserInfo.mark">
                    <span @click="withdrawClick(item)" :style="{
                      opacity:((new Date) - (new Date(item.date + ' ' + item.time)))>=120000?0:1,
                      cursor:((new Date) - (new Date(item.date + ' ' + item.time)))>=120000?'unset':'pointer',
                    }" class="chatMessageDrawback" v-if="item.type!=0 && item.fromUserMark==data.loginedUserInfo.mark" style="font-size: 12px;margin-top: 3px;">撤回</span>
                  </div>
                  <div v-if="item.type==0 && item.toUserMark==data.loginedUserInfo.mark" style="text-align: center">
                    <span style="padding: 3px 3px;background-color: rgba(128,128,128,0.3);color: white;border-radius: 3px;font-size: 12px;word-break: break-all" :innerHTML="getDisplayContentHTML(item.content)"></span>
                  </div>
                </div>

              </div>



            </div>
          </div>
          <div v-if="!(data.chat.userList.length==0 || data.chat.currentUserIndexInUserList==-1)" style="width: 100%;padding: 0px 0px;position: absolute;z-index: 2000;left: 0;bottom: 0;backdrop-filter: blur(10px);border-top: 1px solid rgba(128,128,128,0.2)"
            :style="{
              backgroundColor:appData.theme.translucentBackground
            }"
          >
            <textarea @keypress="async (e)=>{
              if(e.code=='Enter' && e.shiftKey==false){
                if(data.chat.input == '' || data.chat.input=='\n'){
                  data.chat.input = ''
                  await tool.waitSeconds(0.001)
                  if(data.chat.input == '' || data.chat.input=='\n'){
                    data.chat.input = ''
                    return
                  }
                  return
                }
                sendMessage()
              }
            }" v-model="data.chat.input" placeholder="点击Enter发送，按住Shift点击Enter换行" style="width: calc(100% - 0px);max-height: 50px;min-height: 50px;border: 0 !important;border-radius: 3px;outline: none;padding: 5px 5px;display: inline-block;color: var(--color-neutral-10);resize: none;margin-bottom: 35px;padding: 10px 10px"
              :style="{
                // backgroundColor:appData.theme.background
              }"
            ></textarea>
            <div style="width: 100%;height: 30px;display: inline-block;position: absolute;right: 0px;bottom: 5px;z-index: 2000;padding-right: 5px;padding-left: 5px">
              <button @click="sendMessage" :disabled="data.chat.input==''" title="发送" style="border: 0 !important;text-align: center;height: 30px;width: 30px;padding: 3px 3px;padding-top: 7px;position: absolute;top: 0;right: 10px"

              >
                <svg :style="{
                color:data.chat.input==''?'var(--color-neutral-6)':'var(--color-neutral-10)'
                }" width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.003v-13c0-1.464 1.512-2.415 2.817-1.826l.134.066 37 20c1.35.73 1.397 2.626.14 3.437l-.14.082-37 20c-1.288.697-2.843-.182-2.946-1.61L5 44.002v-13a2 2 0 01.467-1.284l.119-.13 5.586-5.585-5.586-5.586a2 2 0 01-.578-1.238L5 17.003v-13 13zm31.094 8.999H14.829L9 31.832v8.816l27.094-14.646zM9 7.357v8.817l5.828 5.828h21.266L9 7.357z" fill="currentColor"/></svg>
              </button>
              <button title="选择图片并发送" style="border: 0 !important;text-align: center;height: 30px;padding: 3px 3px;padding-top: 7px;position: relative;margin-right: 5px"
                      @click="async ()=>{
                  let fn = await selectAndUploadImage()
                  await ws.send(tool.encodeString(JSON.stringify({
                    token:this.data.token,
                    operationName:'application',
                    subOpName:'chatSendMessage',
                    fromUserMark:this.data.loginedUserInfo.mark,
                    toUserMark:this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userInfo.mark,
                    content:fn,
                    type:2
                  })))
                }"
              >
                <svg width="15" height="15" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42 4a2 2 0 011.995 1.85L44 6v36a2 2 0 01-1.85 1.995L42 44H6a2 2 0 01-1.995-1.85L4 42V6a2 2 0 011.85-1.995L6 4h36zm-2 4H8v32h32V8zm-4.234 12.366a.8.8 0 01.234.565V35.4a.6.6 0 01-.6.6H20.449a.6.6 0 01-.162-.022l-8.556-.022a.6.6 0 01-.422-1.024l8.265-8.266a.8.8 0 011.131 0l3.814 3.814 10.115-10.114a.8.8 0 011.132 0zM18 12v6h-6v-6h6z" fill="currentColor"/></svg>
                <span style="font-size: 12px;position: relative;top: -3.5px;margin-left: 3px">发送图片</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div v-if="data.chat.isPreparing" style="position: relative;width: 100%;height: 100%;padding-left: 50%"
        :style="{
          paddingTop:(data.chat.status==2 || localStorage.getItem('chatFormStatus')==2)?'calc(50vh - 20px)':'250px',
        }"
      >
        <div style="display: inline-block;transform: translate(-50%,-50%);color: var(--color-neutral-10);text-align: center">
          <div style="--size: 40px; --dot-size: 4px; --dot-count: 6; --color: var(--color-neutral-10); --speed: 1s; --spread: 60deg;display: inline-block" class="dots">
            <div style="--i: 0;" class="dot"></div>
            <div style="--i: 1;" class="dot"></div>
            <div style="--i: 2;" class="dot"></div>
            <div style="--i: 3;" class="dot"></div>
            <div style="--i: 4;" class="dot"></div>
            <div style="--i: 5;" class="dot"></div>
          </div>
          <br>
          <span>请稍后</span>
        </div>

      </div>
    </div>
   </div>

   <div v-if="data.forward.show" style="width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.1);z-index: 40000;position: fixed;left: 0;top: 0;padding-left: 50vw;padding-top: 50vh">
     <div style="min-width: 400px;max-height: 600px;height: 80vh;transform: translate(-50%,-50%);box-shadow: 0 1px 3px rgba(0,0,0,0.2);width: 400px;display: inline-block;border-radius: 10px;overflow: hidden;border: 2px solid rgba(128,128,128,0.2)"
      :style="{
        backgroundColor:appData.theme.background
      }"
     >
      <div style="padding: 20px 20px;padding-bottom: 10px;font-size: 18px;font-weight: bold">
        <span style="color: var(--color-neutral-10)">转发</span>
        <button @click="controlForward(false)" style="border: 0 !important;padding: 1px 1px;width: 24px;height: 24px;position: absolute;right: 20px;top: 20px;">
          <svg width="22" height="22" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
        </button>
      </div>
       <p v-if="data.chat.userList.length!=0" style="padding-left: 20px;font-size: 14px;color: var(--color-neutral-10)">转发给谁？</p>
       <p v-if="data.chat.userList.length==0" style="padding-left: 20px;font-size: 14px;color: var(--color-neutral-10)">暂无联系人</p>
       <div style="width: 100%;height: calc(100% - 141px);overflow-y: scroll;padding: 20px 20px;padding-top: 0">

         <button :style="{
           display:item.userMark=='aichat'?'none':'unset'
         }" style="border: 0 !important;padding: 10px 10px;position: relative;margin: 0 0 !important;border-radius: 5px !important;width: 100%;text-align: left;overflow:hidden" v-for="item in data.chat.userList" @click="()=>{
           data.forward.selectedUserMark=item.userInfo.mark
         }">
           <div v-if="data.forward.selectedUserMark==item.userInfo.mark" style="position: absolute;width: 100%;height: 100%;background-color: rgba(128,128,128,0.1);left: 0;top: 0">

           </div>
           <v-avatar color="rgb(0,120,215)" style="margin-right: 10px;">
             <span v-if="item.userInfo.avatar==''">{{ tool.getShortName(item.userInfo.name) }}</span>
             <div v-if="item.userInfo.avatar!=''"  style="width: 48px;height: 48px;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;"
                  :style="{
                      backgroundImage:'url(' + appData.serverURL + '/download/' + item.userInfo.avatar + ')'
                    }"
             >
             </div>
           </v-avatar>
           <div style="height: 48px;width: calc(100% - 70px);position: absolute;top: 9px;left: 60px">
            <p style="font-size: 14px;font-weight: bold">{{ item.userInfo.name }}</p>
             <p style="color: var(--color-neutral-6)">{{ item.userInfo.email }}</p>
           </div>
           <div v-if="data.forward.selectedUserMark==item.userInfo.mark" style="width: 5px;height: 20px;background-color: rgb(0,120,215);position: absolute;display: inline-block;left: 0;top: 20px;border-radius: 10px"></div>
         </button>

       </div>
       <div style="text-align: right;padding: 20px 20px;padding-top: 10px;">
         <button :disabled="data.forward.selectedUserMark == ''"
          :style="{
            color:data.forward.selectedUserMark == ''?'var(--color-neutral-6) !important':'var(--color-neutral-10) !important'
          }"
                 @click="async ()=>{
                   await ws.send(tool.encodeString(JSON.stringify({
                    token:this.data.token,
                    operationName:'application',
                    subOpName:'chatSendMessage',
                    fromUserMark:this.data.loginedUserInfo.mark,
                    toUserMark:data.forward.selectedUserMark,
                    content:data.forward.content,
                    type:data.forward.type
                  })))
                  for(let i=0;i<data.chat.userList.length;i++){
                    if(data.chat.userList[i].userMark==data.forward.selectedUserMark){
                      data.chat.currentUserIndexInUserList = i
                      break
                    }
                  }
                  controlChat(1)
                  controlForward(false)
                 }"
         >转发</button>
       </div>
     </div>
   </div>
    <button title="回到顶部" @click="resetSubPageScroll" v-if="data.subPage.scrollTop>100" style="border-radius: 10px;width: 50px;height: 50px;display: inline-block;position: fixed;right: 20px;bottom: 20px;background-color: var(--color-neutral-1);box-shadow: 0 1px 3px rgba(0,0,0,0.1);border: 1px solid rgba(128,128,128,0.2) !important;padding: 0 0 !important;backdrop-filter: blur(20px);color: var(--color-neutral-10);padding-top: 4px !important;z-index: 50000">
      <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.904 11.099c.06.05.115.105.165.164l7.981 9.433A1.4 1.4 0 0131.982 23H26v20a1 1 0 01-1 1h-2a1 1 0 01-1-1V23h-5.982a1.4 1.4 0 01-1.068-2.304l7.981-9.433a1.4 1.4 0 011.973-.164zM43 4a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1h38z" fill="currentColor"/></svg>
    </button>
 </div>
</template>

<script>
import axios from 'axios'
import router from '../router/index'
import tool, {decodeString} from '@/utlis/tool'
import config from '@/config'
import chatItem from "@/components/chatItem.vue";
import moment from "moment/moment";
import chatMessageItem from "@/components/chatMessageItem.vue";
import chatItem2 from "@/components/chatItem2.vue";

export default{
  computed:{
    tool(){
      return tool
    },
    config(){
      return config
    },
    localStorage(){
      return localStorage
    },
    aichatIndex(){
      for(let i=0;i<this.data.chat.userList.length;i++){
        if(this.data.chat.userList[i].userMark=='aichat'){
          return i
        }  
      }
      return -1
    }
  },
  components:{
    chatItem,chatMessageItem,chatItem2
  },
  data(){
    return{
      data:{
        showRV:true,
        theme:{
          background:'',
        },
        nav:{
          isFold:5,
          current:0,
          blueTagPosition:-20
        },
        news:{
          data:undefined,
          data2:undefined
        },
        loginedUserInfo:undefined,
        token:undefined,
        showLoading:false,
        charm:{
          data:undefined,
          favorite:{
            pageId:1,
            data:undefined
          },
          aichat:{
            status:0,
            contentHide:'',
            input:''
          }
        },
        subPage:{
          scrollTop:0
        },
        chat:{
          status:-1,
          userList:[],
          userListDisplay:[],
          searchUserInput:'',
          isPreparing:true,
          currentUserIndexInUserList:-1,
          currentUserMark:'',
          input:'',
          display:[],
          showAni:false,
          warningForm:{
            show:false,
            title:'',
            content:'',
            okText:'',
            cancelText:'',
            okCallback:()=>{},
            showCancel:false,
          }
        },
        forward:{
          show:false,
          selectedUserMark:'',
          type:0,
          content:''
        }
      },
      func:{
        getShortName:undefined
      },
      ws:undefined
    }
  },
  async mounted(){
    //初始化方法
    this.func.getShortName = tool.getShortName

    await tool.axiosPostWithCheckStatus(config.serverURL,'/setting/get',{
      keyName:'banner'
    })

    

    await this.autoLogin()
    this.getNews(undefined)
    if(this.data.loginedUserInfo!=undefined){
      this.getNews(this.data.loginedUserInfo.province)
    }

    setInterval(()=>{
      try {
        this.data.subPage.scrollTop = document.getElementById('subPage').scrollTop
        switch (router.currentRoute.value.fullPath) {
          case '/':
            this.data.nav.current = 0
            break
          case '/search':
            this.data.nav.current = 1
            break
          case '/fillApplication':
            this.data.nav.current = 2
            break
          case '/qaArea':
            this.data.nav.current = 3
            break
          case '/consult':
            this.data.nav.current = 4
            break
          case '/user':
            this.data.nav.current = 5
            break
        }
        this.data.nav.blueTagPosition = document.getElementById('navBlueTag' + this.data.nav.current.toString()).offsetTop + 18
      }catch (e){

      }
    },10)

  },
  methods:{
    goToNews(){
      document.getElementById('subPage').scrollTop = document.getElementById('zx').offsetTop
    },
    getMessageItemInputData(content){
      try {
        return JSON.parse(content)
      }catch(e){
        return content
      }
    },
    controlForward(show,type = 0,content = ''){
      this.data.forward.show = show
      this.data.forward.type = type
      this.data.forward.content = content
      if(show){
        this.data.forward.selectedUserMark = ''
      }
    },
    controlChatWarningForm(show,title,content,showCancel,okCallback = ()=>{},okText = '确定',cancelText = '取消'){
      this.data.chat.warningForm.show = show
      this.data.chat.warningForm.title = title
      this.data.chat.warningForm.content = content
      this.data.chat.warningForm.showCancel = showCancel
      this.data.chat.warningForm.okCallback = okCallback
      this.data.chat.warningForm.okText = okText
      this.data.chat.warningForm.cancelText = cancelText
    },
    getDisplayContentHTML(content){
      content = content.split('\n')
      let re = ''
      for(let i=0;i<content.length;i++){
        if(i){
          re += '<br>'
        }
        re += '<span style="user-select: text">' + content[i] + '</span>'
      }
      return re
    },
    openLink(url){
      window.open(url,'_blank')
    },
    selectAndUploadImage(){
      return new Promise(async (resolve,reject)=>{
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.addEventListener('change', (e) => {
          const file = e.target.files[0];
          if (file) {
            const formData = new FormData();
            formData.append('file', file);
            axios.post(config.serverURL + '/upload', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }).then(async response => {
              let fn = response.data.results
              return resolve(fn)
            }).catch(error => {

            });
          } else {

          }
        });
        fileInput.click();
      })
    },
    formatUnread(n){
      if(n==undefined)return '0'
      if(n>=100){
        return '99+'
      }
      return n.toString()
    },
    getAllUnread(){
      let re = 0
      for(let i=0;i<this.data.chat.userList.length;i++){
        if(this.data.chat.userList[i].userMark=='aichat')continue
        re += this.data.chat.userList[i].unread
      }
      return re
    },
    async withdrawClick(item){
      if(((new Date) - (new Date(item.date + ' ' + item.time)))>120000){
        return
      }
      await this.ws.send(tool.encodeString(JSON.stringify({
        token:this.data.token,
        operationName:'application',
        subOpName:'chatWithdrawMessage',
        fromUserMark:this.data.loginedUserInfo.mark,
        toUserMark:this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userInfo.mark,
        messageMark:item.mark,
        messageDate:item.date,
        messageTime:item.time,
        content:item.content,
        type:item.type
      })))
    },
    chatWithdrawMessage(re){
      let re1 = []
      for(let i=0;i<this.data.chat.userList.length;i++){
        if(this.data.chat.userList[i].userMark == re.results.toUserMark){
          for(let i1=0;i1<this.data.chat.userList[i].messages.length;i1++){
            if(this.data.chat.userList[i].messages[i1].mark==re.results.messageMark)continue
            re1.push(this.data.chat.userList[i].messages[i1])
          }
          for(let i1=0;i1<re.results.newDisplays.length;i1++){
            re1.push(re.results.newDisplays[i1])
          }
          re1.sort((a,b)=>{
            return (new Date(a.date + " " + a.time) - (new Date(b.date + ' ' + b.time)))
          })
          this.data.chat.userList[i].messages = re1
          this.modifyMessageDisplay()
          return
        }
      }
    },
    displayThisGroup(gitem){
      for(let i=0;i<gitem[1].length;i++){
        if(gitem[1][i].type==0 && gitem[1][i].toUserMark!=this.data.loginedUserInfo.mark){
          continue
        }
        return true
      }
      return false
    },
    modifyMessageDisplay(){
      if(this.data.chat.currentUserIndexInUserList==-1 || this.data.chat.userList.length==0)return
      let cml = this.data.chat.userList[this.data.chat.currentUserIndexInUserList].messages
      let re = []
      let lastTime = ''
      let m = ['',[]]
      for(let i=0;i<cml.length;i++){
        let cts = cml[i].date + ' ' + cml[i].time.split(':')[0] + ':' + cml[i].time.split(':')[1]
        if(lastTime!=cts){
          if(lastTime!=''){
            re.push(JSON.parse(JSON.stringify(m)))
            m[0] = ''
            m[1] = []
          }
          lastTime = cts
        }
        m[0] = cts
        m[1].push(JSON.parse(JSON.stringify(cml[i])))
      }
      re.push(JSON.parse(JSON.stringify(m)))
      this.data.chat.display = re
      setTimeout(()=>{
        document.getElementById('chatMessagesForm').scrollTop = 1000000
      },1)
    },
    async chatSendMessage(re){
      let index = -1
      for(let i=0;i<this.data.chat.userList.length;i++){
        if(this.data.chat.userList[i].userMark==(re.results[0].fromUserMark==this.data.loginedUserInfo.mark?re.results[0].toUserMark:re.results[0].fromUserMark)){
          index = i
          if(re.results[0].changeRelationShipStatus!=undefined){
            this.data.chat.userList[i].relationShipStatus = re.results[0].changeRelationShipStatus
          }
          break
        }
      }
      if(index!=-1){
        this.data.chat.userList[index].messages.sort((a,b)=>{
          return (new Date(a.date + ' ' + a.time) - (new Date(b.date + ' ' + b.time)))
        })
        for(let i=0;i<re.results.length;i++){
          if((re.results[i].toUserMark==this.data.loginedUserInfo.mark && index!=this.data.chat.currentUserIndexInUserList) || this.data.chat.status==-1){
            if(re.results[i].fromUserMark!='aichat'){
              this.data.chat.userList[index].unread+=1
            }

          }else{
            await this.ws.send(tool.encodeString(JSON.stringify({
              token:this.data.token,
              operationName:'application',
              subOpName:'chatSetUnreadToZero',
              toUserMark:this.data.loginedUserInfo.mark,
              fromUserMark:this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userInfo.mark
            })))
          }
          this.data.chat.userList[index].messages.push(re.results[i])
          if(re.results[i].fromUserMark=='aichat'){
            this.data.charm.aichat.status = 2
          }
        }
      }else{
        this.data.chat.userList.push({
          userMark: re.results[0].userInfo.mark,
          messages: re.results,
          userInfo: re.results[0].userInfo,
          unread: 1
        })
      }
      this.modifyMessageDisplay()
      this.modifyUserListDisplay()
    },
    async modifyUserListDisplay(){
      let currentUserMark = undefined
      try {
        currentUserMark = this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userMark
      }catch (e) {

      }
      for(let i=0;i<this.data.chat.userList.length;i++){
        if(this.data.chat.userList[i].userMark==currentUserMark){
          this.data.chat.currentUserIndexInUserList = i
          break
        }
      }
      let re = []
      for(let i=0;i<this.data.chat.userList.length;i++){
        if(this.data.chat.userList[i].userMark=='aichat')continue
        if(this.data.chat.userList[i].userInfo.name.indexOf(this.data.chat.searchUserInput)!=-1 || this.data.chat.userList[i].userInfo.email.indexOf(this.data.chat.searchUserInput)!=-1){
          re.push(this.data.chat.userList[i])
        }
      }
      re.sort((a,b)=>{
        return this.getUserLatestMessageSendTime(b) - this.getUserLatestMessageSendTime(a)
      })
      this.data.chat.userListDisplay = re
    },
    getUserLatestMessageSendTime(item){
      for(let i = item.messages.length-1;i>=0;i--){
        if(item.messages[i].type!=0){
          return new Date(item.messages[i].date + ' ' + item.messages[i].time)
        }
      }
      return new Date(0)
    },
    async sendMessage(){
      if(this.data.chat.input == '')return
      await this.ws.send(tool.encodeString(JSON.stringify({
        token:this.data.token,
        operationName:'application',
        subOpName:'chatSendMessage',
        fromUserMark:this.data.loginedUserInfo.mark,
        toUserMark:this.data.chat.userList[this.data.chat.currentUserIndexInUserList].userInfo.mark,
        content:this.data.chat.input,
        type:1
      })))
      await tool.waitSeconds(0.001)
      this.data.chat.input = ''
    },
    formatDateForUser(date) {
      const now = moment();
      const diff = now.diff(date, 'seconds')
      if (diff < 60) {
        return diff + '秒前';
      } else if (diff < 60 * 60) {
        return Math.floor(diff / 60) + '分钟前';
      } else if (diff < 24 * 60 * 60) {
        return Math.floor(diff / (60 * 60)) + '小时前';
      } else {
        try{
          return date.getFullYear().toString() + '年' + (date.getMonth() + 1).toString() + '月' + date.getDate().toString() + '日'
        }catch(ee){
          return date.toString()
        }
        
      }
    },
    getChatUserItemDisplayTime(item){
      for(let i = item.messages.length-1;i>=0;i--){
        if(item.messages[i].type!=0){
          return this.formatDateForUser(item.messages[i].date + ' ' + item.messages[i].time)
        }
      }
      return ''
    },
    getChatUserItemDisplayContent(item){
      for(let i = item.messages.length-1;i>=0;i--){
        if(item.messages[i].type!=0){
          if(item.messages[i].type==2){
            return '[图片]'
          }
          if(item.messages[i].type==3){
            return '[推荐学校]'
          }
          if(item.messages[i].type==4){
            return '[推荐专业]'
          }
          if(item.messages[i].type==5){
            return '[推荐志愿]'
          }
          if(item.messages[i].type==6){
            return '[分享志愿表]'
          }
          if(item.messages[i].type==7){
            return '[问题]'
          }
          if(item.messages[i].type==8){
            return '[推荐用户]'
          }
          return item.messages[i].content
        }
      }
      return ''
    },
    showChatForm(e){
      for(let i=0;i<this.data.chat.userList.length;i++){
        if(this.data.chat.userList[i].userMark==e.userInfo.mark){
          this.data.chat.currentUserIndexInUserList = i
          this.controlChat(1)
          return
        }
      }
      let re = [{
        userMark: e.userInfo.mark,
        messages: [],
        userInfo: e.userInfo,
        unread: 0
      }]
      for(let i=0;i<this.data.chat.userList.length;i++){
        re.push(this.data.chat.userList[i])
      }
      this.data.chat.userList = re
      this.data.chat.currentUserIndexInUserList = 0
      this.data.chat.currentUserMark = e.userInfo.mark
      this.controlChat(1)
      this.modifyUserListDisplay()
      this.modifyMessageDisplay()
    },
    async controlChat(op){
      switch (op) {
        case 0:
          this.data.chat.showAni = true
          this.data.chat.status = 0
          await tool.waitSeconds(0.3)
          this.data.chat.showAni = false
          this.data.chat.status = -1
          break
        case 1:
          this.data.chat.status = 0
            this.data.chat.showAni = true
          await tool.waitSeconds(0.001)
          if(localStorage.getItem('chatFormStatus')==null){
            localStorage.setItem('chatFormStatus',1)
          }
          this.data.chat.status = localStorage.getItem('chatFormStatus')
          await tool.waitSeconds(0.3)
          this.data.chat.showAni = false
          break
        case 2:
          this.data.chat.showAni = true
          if(localStorage.getItem('chatFormStatus')==1){
            localStorage.setItem('chatFormStatus',2)
          }else{
            localStorage.setItem('chatFormStatus',1)
          }
          this.data.chat.status = localStorage.getItem('chatFormStatus')
          await tool.waitSeconds(0.3)
          this.data.chat.showAni = false
          break
      }
    },
    resetSubPageScroll(){
      document.getElementById('subPage').scrollTop = 0
    },
    getSchoolLX(item){
      let re = ''
      if(item.is985=='是'){
        if(re!='')re+='、'
        re+='985'
      }
      if(item.is211=='是'){
        if(re!='')re+='、'
        re+='211'
      }
      if(item.isQJ=='是'){
        if(re!='')re+='、'
        re+='强基计划'
      }
      if(item.isDualClass=='是'){
        if(re!='')re+='、'
        re+='双一流'
      }
      if(re==''){
        return ''
      }else{
        return re
      }
    },
    getSchoolLocationName(item){
      if(item.city.indexOf(item.p)==-1){
        return item.p + '省' + item.city
      }else{
        return item.city
      }
    },
    hideAllCharm(){
      let re = document.getElementsByClassName('charm')
      for(let i=0;i<re.length;i++){
            re[i].style.transform = 'translateX(100%)'
      }
      document.getElementById('charmBg').style.display = 'none'
    },
    ctrlForm(name,op,data){
      if(op){
        document.getElementById(name).style.display = 'unset'
        switch (name) {
          case 'loginPromptForm':

            break
          case 'contentForm':
            document.getElementById('contentForm_title').innerHTML = data.title
            document.getElementById('contentForm_content').innerHTML = data.content
            break
        }
      }else{
        document.getElementById(name).style.display = 'none'
      }
    },
    async ctrlCharm(id,op,data){
      if(op){
        switch (id) {
          case 'favorite':
            this.data.charm.favorite.pageId = 1
            break
        }
      }
      this.data.charm.data = data
      let re = document.getElementsByClassName('charm')
      for(let i=0;i<re.length;i++){
        if(re[i].id==id){
          if(op){
            let flag = false
            for(let i=0;i<re.length;i++){
              if(re[i].style.transform=='translateX(0%)'){
                re[i].style.transform = 'translateX(100%)'
                flag = true
              }
            }
            if(flag){
              await tool.waitSeconds(0.5)
            }
            re[i].style.transform = 'translateX(0%)'
            document.getElementById('charmBg').style.display = 'unset'
          }else{
            re[i].style.transform = 'translateX(100%)'
            document.getElementById('charmBg').style.display = 'none'
          }
          return
        }
      }
    },
    controlLoading(op){
      if(op){
        this.data.showLoading = true
      }else{
        this.data.showLoading = false
      }
    },
    async updateStatus(){
      await tool.axiosPostWithCheckStatus(config.serverURL,'/user/updateStatus',{
        token:this.data.token
      })
    },
    async autoLogin(){
      let loginedUserInfo = localStorage.getItem('loginedUserInfo')
      if(loginedUserInfo!=null){
        loginedUserInfo = JSON.parse(loginedUserInfo)
        let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/user/login',{
          email:loginedUserInfo.email,
          password:loginedUserInfo.password
        })
        if(re.status==1){
          this.controlAppLoading()
          localStorage.setItem('loginedUserInfo',JSON.stringify(re.results.userInfo))
          this.data.loginedUserInfo = re.results.userInfo
          this.data.token = re.results.token
          setInterval(() => {
            this.updateStatus()
          }, 30000);

          //建立ws链接
          const ws = new WebSocket(config.serverWSURL)
          this.ws = ws
          ws.onopen = (res) => {
            ws.send(tool.encodeString(JSON.stringify({
              token:this.data.token,
              operationName:'application',
              subOpName:'connect',
              userMark:this.data.loginedUserInfo.mark,
              userInfo:this.data.loginedUserInfo
            })))
          }
          ws.onmessage = (res) => {
            let re = JSON.parse(decodeString(res.data))
            switch (re.subOpName) {
              case 'chatUserList':
                this.data.chat.userList = re.results
                this.modifyMessageDisplay()
                this.modifyUserListDisplay()
                this.data.chat.isPreparing = false
                break
              case 'chatSendMessage':
                this.chatSendMessage(re)
                break
              case 'chatWithdrawMessage':
                this.chatWithdrawMessage(re)
                break
            }
          }
        }else{
          localStorage.removeItem('loginedUserInfo')
        }
      }else{
        this.controlAppLoading()
      }
    },
    async getNews(pro=undefined){
      let re = await this.axiosGet('/news' + (pro==undefined?(''):('?province=' + pro.toString() ) ) )
      if(pro==undefined){
        this.data.news.data = re.results
      }else{
        this.data.news.data2 = re.results
      }
    },
    axiosGet(url){
      return new Promise((resolve, reject) => {
        var data = '';
        var config = {
           method: 'get',
           url: this.appData.serverURL + url,
           data : data
        };
        axios(config)
        .then((res) => {
          return resolve(JSON.parse(this.decodeString(res.data)))
        })
    })
    },
    changePage(n){
      if(this.data.showLoading){
        return
      }
      this.resetSubPageScroll()
      this.data.nav.current = n
      switch (n) {
        case 0:
          router.push('/')
          break;
        case 1:
          router.push('/search')
          break;
        case 2:
          if(this.data.loginedUserInfo==undefined){
            router.push('/login')
            break
          }
          router.push('/fillApplication')
          break;
        case 3:
          if(this.data.loginedUserInfo==undefined){
            router.push('/login')
            break
          }
          router.push('/qaArea')
          break;
        case 4:
          if(this.data.loginedUserInfo==undefined){
            router.push('/login')
            break
          }
          router.push('/consult')
          break;
        case 5:
          if(this.data.loginedUserInfo==undefined){
            router.push('/login')
            break
          }
          router.push('/user')
          break;
      }
    },
    waitSeconds(n){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                return resolve()
            }, n*1000);
        })
    },
    decodeString(string){
        string = string.split('')
        for(let i=0;i<string.length;i++){
            if(string[i].charCodeAt(0)>=48 && string[i].charCodeAt(0)<=56){
                continue
            }
            if(string[i].charCodeAt(0)<=90){
                string[i] = this.getNumberString(string[i].charCodeAt(0) - 65,2)
            }else{
                string[i] = this.getNumberString(string[i].charCodeAt(0) - 97 + 26,2)
            }
        }
        let string2 = ''
        for(let i=0;i<string.length;i++){
            if(string[i]=='-8'){
                string2+='9'
                continue
            }
            string2+=string[i]
        }
        string2 = string2.split('')
        let string3 = []
        for(let i=0;i<string2.length;i+=3){
            string3.push(this.getNumberString(parseInt(string2[i])*52 + parseInt(string2[i+1] + string2[i+2]),3))
        }
        let string4 = []
        for(let i=string3.length-1;i>=0;i--){
            string4.push(String.fromCharCode(parseInt(string3[i])))
        }
        let string5 = ''
        for(let i=0;i<string4.length;i++){
            if(string4[i]=='?'){
                string5+='22'
                continue
            }
            if((string4[i].charCodeAt(0)>=48 && string4[i].charCodeAt(0)<=57)==false){
                string5+=JSON.stringify(string4[i].charCodeAt(0))
                continue
            }
            string5+=string4[i]
        }
        string5 = string5.split('')
        let string6 = ''
        for(let i=0;i<string5.length;i++){
            let n = parseInt(string5[i])
            let s = ''
            for(let i1=0;i1<n;i1++){
                s+=string5[i+1+i1]
            }
            string6+=String.fromCharCode(parseInt(s))
            i+=n
        }
        return string6
    },
    getFullLengthNumber(n,length){
        n = JSON.stringify(n)
        let c = length - n.length
        for(let i=0;i<c;i++){
            n = '0' + n
        }
        return n
    },
    getNumberString(n,x){
        n = JSON.stringify(n)
        for(let i = n.length;i<x;i++){
            n = '0' + n
        }
        return n
    }
  },
  props:{
    appData:undefined,
    controlAppLoading:undefined
  },
}
</script>

<style scoped>

.charmBgBrush{
  background-color: var(--color-neutral-1);
  opacity: 0.8;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 200000;
}

.charmContent{
  width: 100%;
  height: calc(100% - 57px);
  position: relative;
  z-index: 200005;
}

.charmTitle{
  padding: 20px 20px;
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  z-index: 200005;
  color: var(--color-neutral-10);
}

.charmInside{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-neutral-3);
}

.charm{
  position: fixed;
  height: 100vh;
  width: 100%;
  max-width: 450px;
  right: 0;
  top: 0;
  z-index: 100000;
  transition: transform .5s cubic-bezier(0.23, 1, 0.320, 1);
  transform: translateX(100%);
  padding: 40px 44px;
  padding-top: 75px;
  padding-right: 30px;
}

.nav-button-icon{
  width: 70px;
  height: 60px;
  display: inline-block;
  padding-left: 35px;
  padding-top: 30px;
}

.nav-button{
  width: 100%;
  height: 60px;
  transition: all .05s;
  color: var(--color-neutral-10);
  border-radius: 5px;
  position: relative;
}

.nav-button-selected{
  width: 100%;
  height: 60px;
  transition: all .05s;
  color: var(--color-neutral-10);
  border-radius: 5px;
  position: relative;
  background-color: rgba(128,128,128,0.1);
}

.nav-button:hover{
  background-color: rgba(128,128,128,0.2);
}

.nav-button-selected:hover{
  background-color: rgba(128,128,128,0.2);
}

.full-page{
  width: 100vw;
  height: 100vh;
  position: relative;
}

.sritem:hover .item-wrapper{
  opacity: 1;
}

.item-wrapper{
  opacity: 0;
  display: inline-block;
}

.sritem{
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  color: var(--color-neutral-10);
  border: 1px solid var(--color-neutral-3);
  background-color: var(--color-neutral-1);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
}

.sritem:hover{
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background-color: var(--color-neutral-2);
}

.sritem-selected{
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  color: var(--color-neutral-10);
  border: 1px solid var(--color-neutral-3);
  background-color: var(--color-neutral-1);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background-color: var(--color-neutral-2);
  border: 1px solid var(--color-neutral-4);
  font-weight: bold;
}

.search-item-selected{
  color: rgb(0,120,215);
}
.search-item:hover{
  color: rgb(0,120,215);
  cursor: pointer;
}
.search-item{
  color: var(--color-neutral-10);
}
.item{
  padding: 10px 10px;
  /* background-color: var(--color-neutral-1); */
  color: var(--color-neutral-10);
  cursor: pointer;
}
.item:hover{
  /* background-color: var(--color-neutral-3); */
  background-color: rgba(128,128,128,0.2);
}
.item:active{
  /* background-color: var(--color-neutral-2); */
  background-color: rgba(128,128,128,0.1);
}
.searchInput{
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.searchInput:focus{
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  outline: none !important;;
}

.chatItemButton{
  padding: 10px 10px;
  position: relative;
  color: var(--color-neutral-10);
  border-radius: 5px;
}

.chatItemButton-selected{
  padding: 10px 10px;
  position: relative;
  color: var(--color-neutral-10);
  border-radius: 5px;
  background-color: rgba(128,128,128,0.1);
}

.chatItemButton-selected:hover{
  background-color: rgba(128,128,128,0.2);
}

.chatItemButton-selected:active{
  background-color: rgba(128,128,128,0.15);
}

.chatItemButton:hover{
  background-color: rgba(128,128,128,0.1);
}

.chatItemButton:active{
  background-color: rgba(128,128,128,0.05);
}

.chatMessageDrawback{
  color: transparent;
}

.chatMessageItem:hover .chatMessageDrawback{
  color: var(--color-neutral-6);
}

.image-inside{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
}

.image:hover .image-inside{
  background-color: rgba(0,0,0,0.05);
}

</style>